<template>
  <Modal v-model:open="local_visible" title="Basic Modal" @cancel="handleOk" @ok="handleOk">
    <p>Some contents...</p>
    <p>Some contents...</p>
    <p>Some contents...</p>
    <div v-for="item in cardData" :key="item.title">
      <DemoCard :cardInfo="item"/>
    </div>
  </Modal>
</template>

<script setup>
import { ref } from 'vue'
import { defineProps, defineEmits } from 'vue'
import { useVModel } from '@vueuse/core'
import { Modal } from 'ant-design-vue';
import DemoCard from '../Card/index.jsx'

const props = defineProps({
  visible: Boolean
})

const emits = defineEmits(['update:visible','cancel'])

const local_visible = useVModel(props, 'visible', emits)

const cardData = ref([{
  title: '我是卡片标题1',
  content: '我是卡片内容，随便填写的内容'
},{
  title: '我是卡片标题2',
  content: '我是卡片内容，随便填写的内容'
},{
  title: '我是卡片标题3',
  content: '我是卡片内容，随便填写的内容'
}])

const handleOk = () => {
  emits('cancel')
}
</script>

<style>

</style>